<template>
  <div id="tab">
      <ul>
          <li @click="change(index)" :class="[currentindex==index?'active':'']" :key="item.id" v-for="(item,index) in list">{{item.text}}</li>
      </ul>
      <div class="tabcon" :class="[currentindex==index?'current':'']" v-for="(item,index) in list">
          {{item.text}}
      </div>
  </div>
</template>

<script>
  export default {
    
    data(){
      return{
        currentindex:'0',//当前选项卡的索引
        list:[{
            id:'1',
            text:'春'
        },{
            id:'2',
            text:'夏'
        },{
            id:'3',
            text:'秋'
        },{
            id:'4',
            text:'冬'
        }]
      }
    },
    methods:{
        change:function(index){
            this.currentindex=index;
        }
    }
  }
</script>

<style scoped="scoped">
  *{
      margin: 0px;
      padding: 0px;
  }
  #tab{
      width:100%;
      position: relative;
  }
  #tab ul{
    overflow: hidden;
  }
  #tab ul li{
      width: 100px;
      height: 30px;
      border: 1px solid #409EFF;
      float: left;
      list-style: none;
      text-align: center;
      line-height: 30px;
      border-radius: 10px 10px 0px 0px;
      cursor: pointer;
      border-bottom: none;
  }
  #tab ul li:first-child{
      border-right: none;
  }
  #tab ul li:last-child{
      border-left: none;
  }
  #tab ul .active{
      background-color:#409EFF;
      color:white;
  }
  #tab div{
      width: 100%;
      display: none;
  }
  #tab div img{
      width: 406px;
      border-radius:0px 0px 10px 10px;
  }
  #tab div.current{
      display: block;
  }
  .tabcon{
    height: 100px;
    font-size: 20px;
    color: red;
    border: 1px solid #409EFF;
  }
</style>
